//创建一个document.getElementById(x)函数，方便直接调用
function $(x){
    return document.getElementById(x);
}
//轮播图实现，使用了js按钮控制图片的位置来替换上一张或下一张的轮播效果
var btn=$("btn-group").getElementsByTagName("div");
var a=$("img-group");
btn[0].onclick=function(){
    a.style.left="0";
}
btn[1].onclick=function(){
    a.style.left="-100%";
}
btn[2].onclick=function(){
    a.style.left="-200%";
}
btn[3].onclick=function(){
    a.style.left="-300%";
}
//与轮播图相似，这里是使用左移按钮后会将图片层左滑动来展示,每次点击来控制图片的左相对位置
$("btn-l").onclick=function(){
    var left =getComputedStyle(a,null).left;
    if(parseInt(left)==0){
        a.style.left="-3678px";
    }else if(parseInt(left)==-1226){
        a.style.left="0";
    }else if(parseInt(left)==-2452){
        a.style.left="-1226px";
    }else if(parseInt(left)==-3678){
        a.style.left="-2452px";
    }
}
//与轮播图相似，这里是使用右移按钮后会将图片层右滑动来展示,每次点击来控制图片的右相对位置
$("btn-r").onclick=function(){
    var left =getComputedStyle(a,null).left;
    if(parseInt(left)==0){
        a.style.left="-1226px";
    }else if(parseInt(left)==-1226){
        a.style.left="-2452px";
    }else if(parseInt(left)==-2452){
        a.style.left="-3678px";
    }else if(parseInt(left)==-3678){
        a.style.left="0";
    }
}
var msg2 = $("msg2");
$("msg-l").onclick=function(){
    msg2.style.left="0%"
}
$("msg-r").onclick=function(){
    msg2.style.left="-100%"
}

//去详情页
//使用localStorage来存储点击后的信息,点击商品的展示效果后会使用localStorage在本地保存数据，除非主动删除，否则不会消失，保存后跳转至详情页面来展示效果.
var listItem = document.getElementsByClassName('list-item')
console.log(listItem);
for(var m=0;m<listItem.length;m++){
    listItem[m].onclick=function(){
        var obj = {
            img:this.childNodes[1].name,
            title:this.childNodes[3].innerHTML,
            sex : this.childNodes[5].innerHTML,
            price:this.childNodes[7].innerHTML,
            priceReal:this.childNodes[7].title
        }
        localStorage.setItem('detail',JSON.stringify(obj))
        console.log(JSON.stringify(obj))
        window.location.href='detail.html'
    }
}



